<template>
	<view>
		<u-navbar title="更换手机号" is-fixed
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar>
		<view class="contaier">
			<view class="form">
				<view>
					手机号
					<view class="input" style="display: flex; line-height: 120rpx; align-items: center;">
						<input style="width: 390rpx;" type="number" v-model="form.mobile">
						<view style="font-size: 22rpx; color: #FE3057;" @click="getMobileStatus">{{startTime?showtime+'秒后再试':'获取验证码'}}</view>
						</input>
					</view>
				</view>
				<view>
					验证码
					<input class="input" type="number" v-model="form.captcha" />
				</view>
			</view>

		</view>
		<button class="pass-login-btn" @click="saveEdit">确认</button>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex'
	const app = getApp();

	export default {
		data() {
			return {
				form: {
					mobile: '',
					captcha: ''
				},
				showtime:60,
				startTime:false
			}
		},
		computed: {
			num(){
				if(this.startTime){
					let setTime = setInterval(()=>{
					this.showtime--
					if(!this.showtime){
						clearInterval(setTime)
						this.showtime=60
						this.startTime=false
					}
				},1000)
				}
				
			}
		},
		onLoad(option) {
			this.event = option.event
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 发送验证码
			sendCaptcha() {
				let quaryData = {
					event: this.event,
					mobile: this.form.mobile,
				}
				this.$u.api.getCaptcha(quaryData).then(res => {
					if(res.code===1){
						this.startTime=true
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getMobileStatus(){
				if(this.startTime)return
				this.$u.api.Checkmobile({
					mobile:this.form.mobile
				}).then(res=>{
					if(res.code===1){
						this.sendCaptcha()
					}
				})
			},
			// 保存资料
			saveEdit() {
				if (this.event == 'changemobile') {
					this.$u.api.changeMobile(this.form).then(res => {
						
						if(res.code==1){
							uni.showToast({
								title: res.msg
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)}
						
					})
				} else {
					this.$u.api.bandingMobile(this.form).then(res => {
						
						if(res.code==1){
							uni.showToast({
								title: res.msg
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)}
						
					})
				}


			},

		}
	}
</script>

<style lang="scss">
	.contaier {
		margin: 60rpx 40rpx;
		padding: 10rpx 40rpx;
		height: 400rpx;
		width: 670rpx;
		border-radius: 40rpx;
		box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);

		.form {
			padding: 20rpx;
			font-size: 30rpx;
			// font-weight: 600;

			.input {
				line-height: 80rpx;
				padding: 0 20rpx;
				margin: 10rpx 0;
				border-radius: 40rpx;
				height: 80rpx;
				background-color: #f5f5f5;
			}
		}

	}

	.pass-login-btn {
		width: 70%;
		font-size: 30rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		background-color: #FE3057;
	}

	.main {
		width: 90%;
		margin: 0rpx auto;
		text-align: center;
	}

	.save-btn {
		color: #3BDCA8;

	}

	.save-btn2 {
		color: #3BDCA8;
		margin-top: 70rpx;

	}

	.avatar-wrap {
		margin-top: 20rpx;
		width: 150rpx;
		height: 150rpx;
		display: inline-block;
		margin-bottom: 0rpx;
		position: relative;

		.icon {
			position: absolute;
			bottom: 25rpx;
			right: 15rpx;
		}
	}

	.user-avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	.tishi {
		display: block;
		font-size: 18rpx;
		color: #969696;
	}

	.nickname-wrap {
		border-bottom: 2rpx solid #969696;
		width: 50%;
		height: 60rpx;
		margin: 0 auto;
	}
</style>
